/<template>
  <div>
    <n-space vertical size="large">
      <n-layout has-sider>
        <n-layout-sider content-style="padding: 24px;"> 海淀桥 </n-layout-sider>
        <n-layout>
          <n-layout-header>
            <div class="green">
              <n-gi>
                <!-- 删除 -->
                <n-modal
                  v-model:show="showModalDelete"
                  preset="dialog"
                  title="确认"
                  content="你确认?"
                  positive-text="确认"
                  negative-text="算了"
                  @positive-click="submitCtc"
                  @negative-click="cancelCtc"
                  :after-leave="modelAfterClose"
                >
                  <!-- from表单 -->
                  <n-form
                    ref="formRef"
                    :model="ctc"
                    :rules="rules"
                    :size="size"
                    label-placement="top"
                    :disabled="updateDisabled"
                  >
                    <n-grid :cols="24" :x-gap="24">
                      <n-form-item-gi :span="12" label="id" path="id">
                        <n-input v-model:value="ctc.id" placeholder="请输入" />
                      </n-form-item-gi>
                      <n-form-item-gi :span="12" label="name" path="id">
                        <n-input
                          v-model:value="ctc.name"
                          placeholder="请输入"
                        />
                      </n-form-item-gi>
                    </n-grid>
                  </n-form>
                </n-modal>
              </n-gi>
              <!-- 新增 -->
              <n-gi :span="24">
                <n-grid-item>
                  <div class="light-green">
                    <n-button type="success" @click="addCtc">
                      ctc新增
                    </n-button>
                  </div>
                </n-grid-item>
              </n-gi>
            </div>
          </n-layout-header>
          <n-layout-content content-style="padding: 24px;">
            <div class="light-green">
              <n-data-table
                :columns="columns"
                :data="data"
                :pagination="pagination"
              />
              <!-- 修改新增弹出框 -->
              <n-modal
                style="height: 700px; width: auto"
                v-model:show="showModal"
                :mask-closable="false"
                preset="dialog"
                title="确认"
                content="你确认"
                @positive-click="onPositiveClick"
                @negative-click="onNegativeClick"
                :on-after-leave="modelCloseClear"
              >
                <n-form
                  ref="formRef"
                  :model="ctc"
                  :rules="rules"
                  :size="size"
                  label-placement="top"
                >
                  <n-grid :cols="24" :x-gap="24">
                    <n-form-item-gi :span="12" label="标题" path="title">
                      <n-input
                        v-model:value="ctc.title"
                        placeholder="请输入"
                        @keydown.enter.prevent
                      />
                    </n-form-item-gi>
                    <n-form-item-gi :span="12" label="副标题" path="subhead">
                      <n-input
                        v-model:value="ctc.subhead"
                        placeholder="请输入"
                        @keydown.enter.prevent
                      />
                    </n-form-item-gi>
                    <n-form-item-gi :span="12" label="介绍" path="recommend">
                      <n-input
                        v-model:value="ctc.recommend"
                        placeholder="请输入"
                        @keydown.enter.prevent
                      />
                    </n-form-item-gi>
                    <!-- 类型名称 -->
                    <n-form-item-gi :span="12" label="类目名称" path="ctcName">
                      <n-select
                        label-field="name"
                        value-field="id"
                        children-field="whateverChildren"
                        v-model:value="ctc.ctcId"
                        size="large"
                        placeholder="请输入你的信息"
                        :options="getGroundCtcOptions"
                        filterable
                        @keydown.enter.prevent
                      />
                    </n-form-item-gi>
                    <n-form-item-gi
                      :span="12"
                      label="发货地"
                      path="placeDispatch"
                    >
                      <n-cascader
                        v-model:value="ctc.placeDispatch"
                        value-field="name"
                        label-field="name"
                        children-field="districts"
                        :options="districtsOpt"
                        class="w-264px"
                        check-strategy="child"
                        @keydown.enter.prevent
                      />
                    </n-form-item-gi>
                    <n-form-item-gi :span="12" label="上架" path="ground">
                      <n-select
                        v-model:value="ctc.ground"
                        size="large"
                        placeholder="请输入数据信息"
                        :options="getGroundOptions"
                        filterable
                        @keydown.enter.prevent
                      />
                    </n-form-item-gi>
                    <n-form-item-gi
                      :span="12"
                      label="售后服务"
                      path="afterService"
                    >
                      <n-input
                        v-model:value="ctc.afterService"
                        placeholder="请输入"
                        @keydown.enter.prevent
                      />
                    </n-form-item-gi>
                  </n-grid>
                  <n-gi :span="12">
                    <div style="display: flex; justify-content: flex-end">
                      <n-button round type="primary" @click="hanlderCtcConfirm">
                        确认
                      </n-button>
                      <n-button round type="primary" @click="hanlderCtcCancle">
                        取消
                      </n-button>
                    </div>
                  </n-gi>
                </n-form>
              </n-modal>
            </div>
          </n-layout-content>
          <n-layout-footer>成府路</n-layout-footer>
        </n-layout>
      </n-layout>
      <n-row gutter="12">
        <!-- 测试数据 -->
        <n-col :span="8">
          <div class="green"></div>
        </n-col>
      </n-row>
    </n-space>
  </div>
</template>
<script>
import { districtsOpt } from "../utils/districts";
import { h, defineComponent, ref, onMounted, computed, reactive } from "vue";
import {
  NButton,
  createDiscreteApi,
  NDataTable,
  NModal,
  NRow,
  NCol,
  NInput,
  NGrid,
  NFormItemGi,
  NForm,
  NSpace,
  NLayout,
  NLayoutSider,
  NLayoutHeader,
  NLayoutFooter,
  NFlex,
  NDatePicker,
  NSelect,
  NCascader,
} from "naive-ui";
import { getRequest, postRequestLogin } from "@/http/request";

const createColumns = ({ updateCtc, deletCtc }) => {
  return [
    {
      title: "id",
      key: "id",
    },
    {
      title: "标题",
      key: "title",
    },
    {
      title: "副标题",
      key: "subhead",
    },
    {
      title: "介绍",
      key: "recommend",
    },
    {
      title: "创建时间",
      key: "createTime",
    },
    {
      title: "修改时间",
      key: "updateDate",
    },
    {
      title: "创建人",
      key: "createPerson",
    },
    {
      title: "修改人",
      key: "updatePerson",
    },
    {
      title: "类目名称",
      key: "ctcName",
    },
    {
      title: "发货地",
      key: "placeDispatch",
    },
    {
      title: "上架",
      key: "ground",
    },
    {
      title: "售后服务",
      key: "afterService",
    },
    {
      title: "Action",
      key: "actions",
      render(row) {
        return [
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: "small",
              onClick: () => updateCtc(row),
            },
            { default: () => "修改" }
          ),
          h(
            NButton,
            {
              strong: true,
              tertiary: true,
              size: "small",
              onClick: () => deletCtc(row),
            },
            { default: () => "删除" }
          ),
        ];
      },
    },
  ];
};
// 商品信息
const commodityData = ref([]);
// 类目信息
const ctcDataRef = ref([]);
// 初始化数据信息
onMounted(
  // 查询商品信息
  getRequest(null, `commodity/queryCommodity`).then((res) => {
    commodityData.value = res.data.data;
  }),
  // 查询类目信息
  getRequest(null, `ctc/querySelectCtc`).then((res) => {
    ctcDataRef.value = res.data.data;
  })
);
export default defineComponent({
  components: {
    NDataTable,
    createDiscreteApi,
    NButton,
    NModal,
    NRow,
    NCol,
    NInput,
    NGrid,
    NFormItemGi,
    NForm,
    NSpace,
    NLayout,
    NLayoutSider,
    NLayoutHeader,
    NLayoutFooter,
    NFlex,
    NDatePicker,
    NSelect,
    computed,
    districtsOpt,
    NCascader,
    reactive,
  },
  // 选择的类目信息
  computed: {
    getGroundOptions() {
      const data = [
        { label: "上架", value: "0" },
        { label: "下架", value: "1" },
      ];
      return data;
    },
  },
  setup() {
    const paginationReactive = reactive({
      page: 2,
      pageSize: 5,
      showSizePicker: true,
      pageSizes: [3, 5, 7],
      onChange: (page) => {
        paginationReactive.page = page;
      },
      onUpdatePageSize: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
      },
    });
    const message = createDiscreteApi(["message"]).message;
    // 添加按钮
    const showModalRef = ref(false);
    // 表单按钮
    const formRef = ref({
      id: null,
      title: "我的方式",
      subhead: "我的方式",
      recommend: "我的方式",
      updateDate: null,
      createPerson: null,
      updatePerson: null,
      ctcId: null,
      placeDispatch: null,
      ground: null,
      afterService: null,
      commentId: null,
      ctcName: null,
    });
    // 删除按钮
    const showModalRefDelete = ref(false);
    const deletCtcFromData = ref(null);
    const formattedValueRef = ref("2007.06.30 12:08:55");
    const rules = {
      // 售后服务
      afterService: {
        required: true,
        validator(rule, value) {
          if (!/^[\u4E00-\u9FA5]+$/.test(value)) {
            return new Error("汉子");
          }
          return true;
        },
        trigger: ["blur", "input"],
      },
      // 上架
      ground: {
        required: true,
        validator(rule, value) {
          if (!/^[0-9]*$/.test(value)) {
            return new Error("请输数字");
          }
          return true;
        },
        trigger: ["blur", "input"],
      },
      // 发货地
      placeDispatch: {
        required: true,
        validator(rule, value) {
          if (!/^[\u4E00-\u9FA5]+$/.test(value)) {
            return new Error("请输数字");
          }
          return true;
        },
        trigger: ["blur", "input"],
      },
      // 介绍
      recommend: {
        required: true,
        validator(rule, value) {
          if (!/^[\u4E00-\u9FA5]+$/.test(value)) {
            return new Error("请输入汉字");
          }
          return true;
        },
        trigger: ["blur", "input"],
      },
      // 副标题
      subhead: {
        required: true,
        validator(rule, value) {
          if (!/^[\u4E00-\u9FA5]+$/.test(value)) {
            return new Error("请输入汉字");
          }
          return true;
        },
        trigger: ["blur", "input"],
      },
      // 标题
      title: {
        required: true,
        validator(rule, value) {
          if (!/^[\u4E00-\u9FA5]+$/.test(value)) {
            return new Error("请输入汉字");
          }
          return true;
        },
        trigger: ["blur", "input"],
      },
      //姓名
      name: {
        required: true,
        validator(rule, value) {
          if (!/^[\u4E00-\u9FA5]+$/.test(value)) {
            return new Error("请输入汉字");
          }
          return true;
        },
        trigger: ["blur", "input"],
      },
    };
    return {
      getGroundCtcOptions: ctcDataRef,
      // 省市区单位信息
      districtsOpt,
      // 选择数据信息
      formattedValue: formattedValueRef,
      // 禁用按钮
      updateDisabled: ref(true),
      // 删除按钮
      showModalDelete: showModalRefDelete,
      size: ref("medium"),
      // 禁用
      ctc: formRef,
      // 验证输入参数
      rules,
      // 表单遮罩键
      showModal: showModalRef,
      // 取消
      onNegativeClick() {
        message.success("Cancel");
        showModalRef.value = false;
      },
      // 成功
      onPositiveClick(e) {
        e.preventDefault();
        formRef.value?.validate((errors) => {
          if (!errors) {
            message.success("验证成功");
          } else {
            console.log(errors);
            message.error("验证失败");
          }
        });
        message.success("Submit");
        showModalRef.value = false;
      },
      data: commodityData,
      // 添加和删除
      columns: createColumns({
        // 修改
        updateCtc(row) {
          showModalRef.value = true;
          formRef.value = row;
        },
        // 删除
        deletCtc(row) {
          formRef.value = row;
          showModalRefDelete.value = true;
          deletCtcFromData.value = row;
        },
      }),
      // model关闭回调
      modelAfterClose() {
        formRef.value = {};
      },
      // 表单取消按钮
      hanlderCtcCancle() {
        showModalRef.value = false;
      },
      // 表单确认按钮
      hanlderCtcConfirm(e) {
        e.preventDefault();
        console.log(formRef.value, "参数");
        postRequestLogin(formRef.value, `commodity/addCommodity`).then(
          (res) => {
            console.log(res, "返回参数信息");
            if (res.data.code == 500) {
              message.error("请求失败");
            }
            if (res.data.code == 200) {
              message.success("请求成功");
              showModalRef.value = false;
            }
          }
        );
      },
      pagination: paginationReactive,
      // 确认删除按钮
      submitCtc() {
        showModalRefDelete.value = false;
      },
      // 删除取消按钮
      cancelCtc() {
        showModalRefDelete.value = false;
      },
      // 清空回调按钮
      modelCloseClear() {
        formRef.value = {};
      },
      // 添加按钮
      addCtc() {
        showModalRef.value = true;
      },
    };
  },
});
</script>
<style scoped>
.light-green {
  height: 108px;
  background-color: rgba(0, 128, 0, 0.12);
}
.green {
  height: 108px;
  background-color: rgba(0, 128, 0, 0.24);
}
.n-layout-header,
.n-layout-footer {
  background: rgba(128, 128, 128, 0.2);
  padding: 24px;
}

.n-layout-sider {
  background: rgba(128, 128, 128, 0.3);
}

.n-layout-content {
  background: rgba(128, 128, 128, 0.4);
}
</style>